<template>
  <div style="background-color: #f0f3fb; padding: 10px">
    <div style="background-color: #fff; border-radius: 5px; padding: 10px">
      <div style="display: flex">
        <image src="https://www.wantongkonggu.cn/crmebimage/profile/upload/2025/10/10/风车_20251010084002A010.png" style="width: 30px; height: 30px; margin-right: 15px"></image>
        <div style="font-family: 'PingFang_Bold'; height: 30px; line-height: 30px">基础信息</div>
      </div>
      <input v-model="spForm.storeName" class="input_class" placeholder="请填写商品名称" />
      <textarea v-model="spForm.storeInfo" class="textarea_class" placeholder="请写下商品的简介,便于用户了解商品	"></textarea>
      <input v-model="spForm.price" class="input_class" placeholder="商品价格" />
      <div style="margin-top: 15px">
        <u-upload :fileList="fileList" @afterRead="afterRead" height="200" width="200" @delete="deletePic" name="3" multiple :maxCount="10" :previewFullImage="true">
          <div style="border: 1px #00000 dashed; border-radius: 3px; width: 200rpx; height: 200rpx; line-height: 200prx; text-align: center">
            <image src="http://36.139.124.9:9000/community/img/uploadImg.png" style="width: 90px; height: 90px"></image>
          </div>
        </u-upload>
      </div>
    </div>
    <div style="background-color: #fff; border-radius: 5px; padding: 10px; margin-top: 15px">
      <div style="display: flex; padding: 10px">
        <image src="https://www.wantongkonggu.cn/crmebimage/profile/upload/2025/10/10/风车_20251010084002A010.png" style="width: 30px; height: 30px; margin-right: 15px"></image>
        <div style="font-family: 'PingFang_Bold'; height: 30px; line-height: 30px">详细信息</div>
      </div>
      <u-cell-group>
        <u-cell size="large" title="商品类别" :value="typeValue1" @click="getType" isLink></u-cell>
        <u-cell size="large" title="是否上架" :value="typeValue" @click="getTypelx" isLink></u-cell>
        <input v-model="spForm.giveIntegral" class="input_class" placeholder="获得返回积分" />
        <input v-model="spForm.canUseIntegral" class="input_class" placeholder="抵扣比例" />
        <input v-model="spForm.unitName" class="input_class" placeholder="商品单位" />
        <input v-model="spForm.stock" class="input_class" placeholder="商品库存" />
      </u-cell-group>
      <u-picker :show="showType" @cancel="showType = false" :columns="columns" keyName="categoryName" @confirm="getTsType"></u-picker>
    </div>
    <u-button type="primary" @click="addOwner">保存</u-button>
  </div>
</template>

<script>
import { categorylist, systemproduct, getUserInfo, merlist } from '../../utils/request_sh.js';
export default {
  data() {
    return {
      showType: false,
      columns: [],
      fileList: [],
      typeValue1: '请选择商品类型',
      typeValue: '请选择是否上架',
      xiaoqumingc: '请选择小区',
      isType: '1',
      title: '',
      content: '',
      complaintCategory: '',
      complaintCategorys: '',
      estateId: '',
      spForm: {
        image: '',
        storeName: '',
        storeInfo: '',
        price: '',
        isShow: '',
        merName: '',
        merId: '',
        storeType: '3',
        giveIntegral: '',
        cateId: '',
        canUseIntegral: '',
        stock: '',
        unitName: ''
      }
    };
  },
  onLoad() {
    this.getUserInfo();
  },
  methods: {
    getUserInfo() {
      var userInfo = uni.getStorageSync('userInfo');
      var merId = userInfo ? userInfo.merId : '';
      getUserInfo(merId).then((res) => {
        this.spForm.merName = res.data.merName;
      });
    },
    getType() {
      categorylist().then((res) => {
        this.isType = 2;
        this.showType = true;
        this.columns = [res.rows];
      });
    },
    getestate() {
      estateapppage({ size: 200 }).then((res) => {
        res.data.records.forEach((item) => {
          item.dictValue = item.name;
        });
        this.columns = [res.data.records];
        this.isType = 3;
        this.showType = true;
      });
    },
    addOwner() {
      var docUrl = '';
      this.fileList.forEach((item) => {
        docUrl += item.fileName;
      });
      var userInfo = uni.getStorageSync('userInfo');
      console.log(userInfo);
      docUrl.substring(0, docUrl.length - 1);
      this.spForm.isShow = this.merchantCategoryId;
      this.spForm.cateId = this.complaintCategorys;
      this.spForm.image = docUrl;
      this.spForm.merId = userInfo.merId;
      systemproduct(this.spForm).then((res) => {
        if (res.code == 200) {
          // uni.showToast({
          // 	icon: 'none',
          // 	title: '操作成功！'
          // })
          // setTimeout(() =>{
          // 	uni.navigateBack({
          // 		  delta: 1,
          // 		  animationType: 'pop-out',
          // 		  animationDuration: 200
          // 	})
          // }, 1500)
        }
      });
    },
    getTsType({ value }) {
      this.showType = false;
      if (this.isType == 1) {
        this.typeValue = value[0].categoryName;
        this.complaintCategory = value[0].merchantCategoryId;
      } else if (this.isType == 2) {
        this.typeValue1 = value[0].categoryName;
        this.complaintCategorys = value[0].merchantCategoryId;
      }
    },
    getTypelx() {
      this.isType = 1;
      this.showType = true;
      this.columns = [
        [
          { categoryName: '是', merchantCategoryId: '1' },
          { categoryName: '否', merchantCategoryId: '2' }
        ]
      ];
    },
    // 删除图片
    deletePic(event) {
      this.fileList.splice(event.index, 1);
    },
    // 新增图片
    async afterRead(event) {
      console.log(event);
      // 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
      let lists = [].concat(event.file);
      let fileListLen = this.fileList.length;
      lists.map((item) => {
        this.fileList.push({
          ...item,
          status: 'uploading',
          message: '上传中'
        });
      });
      for (let i = 0; i < lists.length; i++) {
        const result = await this.uploadFilePromise(lists[i].url);
        let item = this.fileList[fileListLen];
        this.fileList.splice(
          fileListLen,
          1,
          Object.assign(item, {
            status: 'success',
            message: '',
            url: result.url,
            fileName: result.fileName
          })
        );
        fileListLen++;
      }
      console.log(this.fileList);
    },
    uploadFilePromise(url) {
      const userInfo = uni.getStorageSync('userInfo');
      const token = userInfo ? userInfo.token : '';
      return new Promise((resolve, reject) => {
        let a = uni.uploadFile({
          header: {
            'Authori-zation': token
          },
          url: 'https://www.wantongkonggu.cn//api/adminApph7/common/upload',
          filePath: url,
          name: 'file',
          formData: {
            user: 'test'
          },
          success: (res) => {
            console.log(res);
            resolve(JSON.parse(res.data));
          }
        });
      });
    }
  }
};
</script>

<style lang="scss">
.textarea_class {
  background-color: #f0f3fb;
  border-radius: 5px;
  width: calc(100% - 25px);
  padding: 12px;
  margin-top: 10px;
  font-size: 13px;
}
.input_class {
  background-color: #f0f3fb;
  border-radius: 5px;
  width: calc(100% - 25px);
  padding: 12px;
  margin-top: 10px;
  font-size: 13px;
}
</style>
